<template>
  <div id="RoleDialog">
    <el-dialog title="添加角色" width="600px" :visible.sync="show">
      <el-form label-width="120px" label-suffix=":" label-position="left">
        <el-form-item label="角色名称">
          <el-input v-model="formData.roleName"/>
        </el-form-item>
        <el-form-item label="功能权限">
          <el-tree
              ref="tree"
              :data="treeCfg"
              show-checkbox
              node-key="id"
              :default-checked-keys="description"
              :props="{children: 'children',label: 'title'}"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import Vue, {ComponentOptions, VueConstructor} from "vue"
import Component from 'vue-class-component'
import {Mixins, Ref} from "vue-property-decorator";
import {FormMixin} from "@/plugins/mixins/form";
import {ActivityFormTB} from "@/config/table";
import {cloneDeep, formatOptions, hookSubmit, updateCfgOption} from "vijay-util";
import {requestByGet, requestByPost, requestByPut} from "@/utils/request";
import MENUS from "@/config/menus";

@Component
export default class RoleDialog extends Mixins(FormMixin) implements ComponentOptions<Vue> {
  name = "RoleDialog"
  show = false;
  editId = null;
  treeCfg = MENUS;
  formData:any = {};
  description = [];
  @Ref() tree!: any;

  @hookSubmit()
  async onSubmit() {
    const nodes = this.tree.getCheckedNodes(false, true);
    const description = nodes.map(({id}) => id).join(",");
    const requestFn = this.editId ? requestByPut : requestByPost;
    await requestFn(`sys/sysDepartRole/${this.editId ? 'edit' : 'add'}`, {...this.formData,description});
    this.$message.success("操作成功！");
    this.show = false;
    this.$emit('refresh')
  }

  open(data = {} as any) {
    this.show = true;
    this.formData = cloneDeep(data);
    this.description = this.formData?.description?.split(",");
    this.editId = data.id;

  }

}
</script>

<style scoped lang="scss">
@import "~assets/common.scss";

#RoleDialog {
}
</style>
